<template>
	<view class="all">
			<!--顶部导航栏-->
			<view class="uni-tab-bar" >
				<scroll-view scroll-x class="uni-swiper-tab">
					<block v-for="(tabBar,index) in tabBars" :key="index">
						<!-- <view class="add_for_adapt"> -->
							<view class="swiper-tab-list" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
								<view class="swiper-tab-line" v-cloak>
									{{tabBar.name}}({{tabBar.number == '' ? 0 :tabBar.number }})
								</view>
							</view>
						<!-- </view> -->
					</block>
				</scroll-view>
			</view>
			
			<!--内容区-->
			<view class="contentindex">
				<swiper :current="tabIndex" @change="tabChange" class="addheight">
					<swiper-item v-for="(content,index) in contentList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
						
						<view class="swiper-item" v-for="(res,index) in contentList[index].data" :key="index">
							<view class="imgclass">
								<image :src="res.avatar" ></image>	
							</view>
							<view class="info">
								<view class="info" v-cloak>
									<image src="../../../../static/jingdiananli_kongwujiaoxing_shoucang.png" style="width: 33upx;height: 33upx;margin-right: 10upx;margin-top: 5upx;"></image>
									{{res.nickname_wechat}}
								</view>
								<view class="time" v-cloak>报单时间 : {{res.agenttime}}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
</template>

<script>
	// import uniLoadMore from '../../../../components/uni-load-more.vue';
	export default {
		// components: {
		// 	uniLoadMore
		// },
		data() {
			return {
				number:'',
				tabCurrentIndex: 0,
				tabIndex: 0,	//选中标签栏的序列
				tabBars:[
					{
						name: '一级',
						id: '0',
						number:'',
					},
					{
						name: '二级',
						id: '1',
						number:'',
					}
				],
				contentList: [
					// 第一栏数据
					{
						data:[]
					},
					// 第二栏数据
					{
						headimg: '222',
						name: '222',
						date:'222'
					}
						
				],
				swiperHeight: 0
			
			}
		},
		onLoad:function(){
			uni.showLoading()
			// 页面显示是默认选中第一个
			this.tabCurrentIndex = 0;
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					if(this.tabIndex==0) {
						this.setAjax0()
					} else {
						this.setAjax1()
					}
					
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		methods: {
			toggleTab(index){
				// console.log(index)
				this.tabIndex = index
			},
			//滑动切换swiper
			tabChange(e){
				// console.log(e.detail)
				const tabIndex = e.detail.current
				this.tabIndex = tabIndex
				
			},
			setAjax0(){
				uni.request({
					url: 'https://app.t9y9y9.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=commission.down.get_list&app=1&page=1',
					method: 'POST',
					data: {'openid':this.openid,"level": 1},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						console.log(res)
						uni.hideLoading()
						this.tabBars[0].number=res.data.result.list.length
						this.contentList[0].data = res.data.result.list
						
						console.log(this.contentList[0].data)
					},
					fail: () => {},
					complete: () => {}
				});
			},
			setAjax1(){
				uni.request({
					url: 'https://app.t9y9y9.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=commission.down.get_list&app=1&page=1',
					method: 'POST',
					data: {'openid':this.openid,"level": 2},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						this.tabBars[1].number=res.data.result.list.length
					},
					fail: () => {},
					complete: () => {}
				});
			},
			changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			}
		}
	}
</script>

<style>
.all {
	height: 100%;
	background-color: #eee;
}
.addheight {
	height: 700px;
}
/* 内容区 */
.contentindex {
	height: 100%;
	background-color: #fff;
}
.info {
	margin-top: 6upx;
}
/* 写死高度5000,应该没有那么多的团队成员 */
.nav-item {
	height: 5000upx!important;
}
.swiper-item {
	margin-top: 10upx;
}
.time {
	margin-left: 10upx;
	font-size: 23upx;
	color: #999;
}
.swiper-item {
	display: flex;
	height: 100upx;
	background-color: #fff;
}
.swiper-item .imgclass{
	flex: 1;
}
.swiper-item .imgclass image {
	margin-top: 15upx;
	margin-left: 15upx;
	width: 80upx;
	height: 80upx;
	border-radius: 40upx;
}
.swiper-item .info{
	flex: 4;
}
.uni-swiper-tab{
	border-bottom: 20upx solid #eeeeee;
}
.swiper-tab-list{
	width: 50%;
	height: 100%;
	color: #000;
	font-weight: bold;
}
.imgclass {
	width: 100upx;
	height: 100upx;
	border-radius: 50upx;
}
.uni-tab-bar .active{
	color: #ff9326;
	border-bottom: 4upx solid #ff9326;
}
.uni-tab-bar {
	background-color: #fff;
	margin-top: 10upx;
}
.active .swiper-tab-line{
	color: #ff9326;
	width: 70upx;
	margin: auto;
	margin-bottom: 25upx;
	
}

</style>
